<script setup lang="ts" name="My">
import {onMounted, reactive, toRefs} from 'vue'
import HeaderNav from "@/components/HeaderNav.vue";
import FooterNav from "@/components/FooterNav.vue";
import { showToast } from 'vant';
import useClipboard from "vue-clipboard3";
import store from "@/store";
import {useRouter} from "vue-router";

const { toClipboard } = useClipboard();
const router = useRouter();
const state = reactive({
  show: false,
  userInfo: {
    avatar: "",
    nickname: "",
    phone: "",
    address: "",
    email: "",
    wechat: "",
    qq: "",
    weibo: "",
    github: "",
    website: "",
    introduction: "",
  },
  orderTab: [
    {
      icon: "send-gift-o",
      text: "待付款",
    },
    {
      icon: "send-gift-o",
      text: "待发货",
    },
    {
      icon: "todo-list-o",
      text: "待收货",
    },
    {
      icon: "point-gift-o",
      text: "待评价",
    },
  ],
}); // tab

const setting = () => {
  router.push({ path: "/my/setting" });
};
onMounted(() => {
  // 跳转页面后，阻止返回
  history.pushState(null, <never>null, document.URL);
  window.addEventListener("popstate", function () {
    history.pushState(null, <never>null, document.URL);
  });

  // 获取用户信息
  state.userInfo = store.userStore.info;
})
const contactHandle = () => {
  state.show = true;
};
const copyHandle = () => {
  toClipboard('账号本子');  //实现复制
  showToast({
    message: '微信公众号已复制',
    duration: 1000,
  });
  state.show = false;
}
const goodHandle = () => {
  showToast('感谢你的支持');
}
const {
  show,
  userInfo,
  orderTab
} = toRefs(state)
</script>

<template>
  <div class="my_warp app_content">

    <!-- 导航栏 -->
    <div class="header_body">
      <header-nav :leftArrow="false" titelText="我的"></header-nav>
    </div>

    <!-- 中间 -->
    <div class="warp_body">
      <div class="user-info-box">
        <van-icon name="setting-o" class="mgt-icon" @click="setting"/>

        <van-row gutter="20">
          <van-col span="4">
            <van-image
                round
                width="60"
                height="60"
                :src="userInfo.avatar"
            />
          </van-col>
          <van-col span="20">
            <div class="right-box">
              <div class="name-text">{{userInfo.nickname}}</div>
              <div class="sign-text">{{userInfo.introduction}}</div>
            </div>
          </van-col>
        </van-row>
      </div>

      <div style="margin: 10px">
        <van-grid square>
          <van-grid-item
              v-for="(item, index) in orderTab"
              :icon="item.icon"
              :text="item.text"
              :key="index"
          >
          </van-grid-item>
        </van-grid>
      </div>

      <div style="margin: 10px">
        <div style="margin: 10px 0">
          <van-cell-group>
            <van-cell title="会员中心" value="未开通" is-link icon="diamond-o"/>
            <van-cell title="修改密码" is-link icon="records-o" to="/my/pwd"/>
          </van-cell-group>
        </div>
        <div style="margin: 10px 0">
          <van-cell-group>
            <van-cell title="导入数据" is-link icon="exchange"/>
            <van-cell title="导出数据" is-link icon="exchange"/>
          </van-cell-group>
        </div>
        <div style="margin: 10px 0">
          <van-cell-group>
            <van-cell title="联系我们" is-link icon="chat-o" @click="contactHandle"/>
            <van-cell title="好评鼓励" is-link icon="good-job-o" @click="goodHandle"/>
            <van-cell title="关于我们" value="7.5.4" is-link icon="info-o" to="/my/about"/>
          </van-cell-group>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer_body">
      <footer-nav></footer-nav>
    </div>
  </div>

  <van-dialog v-model:show="show" message="微信公众号：账号本子" close-on-click-overlay>
    <template #footer>
      <div class="van-hairline--top van-dialog__footer">
        <button type="button" class="van-button van-button--default van-button--large van-dialog__confirm" @click="copyHandle">
          <div class="van-button__content">
            <span class="van-button__text">复制并打开微信</span>
          </div>
        </button>
      </div>
    </template>
  </van-dialog>
</template>

<style scoped lang="less">
.app_content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;

  .user-info-box {
    position: relative;
    margin: 10px;
    padding: 10px 20px 10px 10px;
    background: #fff;
    border-radius: 6px;
    font-size: 14px;
    color: #aaa;

    .right-box {
      display: flex;
      flex-direction: column;
      height: 100%;

      .name-text {
        margin: auto auto auto 10px;
      }

      .sign-text {
        margin: auto auto auto 10px;
      }
    }

    .mgt-icon {
      position: absolute;
      right: 10px;
    }
  }
}

</style>
